<template>
	<view class="container">
		<view class="order-complete">
			订单已完成 尊敬的至减用户!
		</view>
		<view class="button-group">
			<button class="btn" @click="yaoqingyouli">联系客服</button>
			<button class="btn blue" @click="quxiaodingdan">取消订单</button>
		</view>
		<view class="order-details">
			<view class="order-number">
				单号：{{orderId}}
			</view>
			<view class="product" v-for="(item,,index) in items">
				<image :src="item.comboImg" class="product-image"></image>
				<view class="product-info">
					<view class="product-name">{{item.comboName}}</view>
					<view class="product-price">x{{nums[index]}}</view>
				</view>
			</view>
			<!-- 		<view class="discount">
				优惠减免合计
				<view class="discount-amount">-¥{{orderPrice*0.9}}</view>
			</view> -->

			<view class="total">
				共1件商品
				<view class="total-amount red">实付 ¥{{money}}</view>
			</view>
			<view class="footer">
				总原价
			</view>
		</view>
		<view class="order-time">
			下单时间：{{createTime}}
		</view>
	</view>
</template>


<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const orderId = ref('')

	const createTime = ref('')

	const money = ref('')

	const items = ref('')

	const nums = ref([])

const yaoqingyouli = ()=>{
	uni.navigateTo({
		url:'../yaoqingyouli/yaoqingyouli'
	})
}

	const totalNums = ref('')
	onLoad((options) => {
		if (options.orderDetails) {
			const orderDetails = JSON.parse(decodeURIComponent(options.orderDetails));
			orderId.value = orderDetails.orderId
			createTime.value = orderDetails.createTime
			money.value = orderDetails.money
			items.value = orderDetails.items
			nums.value = orderDetails.nums
			totalNums.value = orderDetails.totalNums
			console.log(orderDetails)
			console.log('orderId:', orderDetails.orderId);
			console.log('createTime:', orderDetails.createTime);
			console.log('money:', orderDetails.money);
			console.log('items:', orderDetails.items);
			console.log('nums:', orderDetails.nums);
			console.log('totalNums:', orderDetails.totalNums);
		}
	});
const quxiaodingdan = () => {
    uni.showModal({
        title: '提示',
        content: '确认取消订单吗？',
        cancelText: "取消",
        confirmText: "确定",
        confirmColor: '#333',
        cancelColor: '#333',
        success: function(res) {
            if (res.confirm) {
                console.log(111);
                const xinxi = {
                    orderId: orderId.value,
                    createTime: createTime.value,
                    money: money.value,
                    nums: nums.value,
                    totalNums: totalNums.value
                };

                // Convert the xinxi object to a JSON string and then encode it
                const xinxiStr = encodeURIComponent(JSON.stringify(xinxi));

                uni.navigateTo({
                    url: `/pages/liyouPages/liyouPages?xinxi=${xinxiStr}`
                });
            } else {
                // Execute operation for cancel action
            }
        }
    });
};

</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.order-complete {
		text-align: center;
		font-size: 36rpx;
		margin-top: 20rpx;
		color: #333;
	}

	.button-group {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}

	.btn {
		padding: 10rpx 20rpx;
		margin: 0 10rpx;
		color: #fff;
		width: 30%;
		background-color: #999;
		border-radius: 25px;
		font-size: 28rpx;
	}

	.blue {
		background-color: #333;
		color: #fff;
	}

	.order-details {
		margin-top: 20rpx;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.order-number {
		font-size: 30rpx;
		color: #888;
		margin-bottom: 20rpx;
	}

	.product {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.product-image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}

	.product-info {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.product-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.product-price {
		font-size: 32rpx;
		color: #333;
	}

	.product-content {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.content-label,
	.content-detail,
	.content-price {
		color: #333;
	}

	.discount,
	.payment-method,
	.total {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.discount-amount,
	.payment-amount,
	.total-amount.red {
		color: #ff0000;
	}

	.total-amount {
		color: #333;
	}

	.footer {
		text-align: right;
		font-size: 28rpx;
		color: #888;
		margin-top: 10rpx;
	}

	.order-time {
		text-align: center;
		font-size: 28rpx;
		color: #888;
		margin-top: 20rpx;
	}
</style>